 * {
     margin: 0px;
     padding: 0px;
     list-style: none;
     box-sizing: border-box;
 }

 .news {
     background: url(bg4.jpg) center center;
     height: 100vh;
     background-size: cover;
     overflow-y: auto;padding: 25px 0
 }

 .news .datearea {
     color: #fff;
     text-align: center;
     padding: 25px 0 10px;
 }

 .news .time {
     font-size: 20vw;
 }

 .news .day {
     font-size: 16px;
 }

 .news .old {
     font-size: 12px;
     display: none
 }

 .news .newslist {
     padding: 0 15px;
 }

 .news .newslist ul li {
     margin-bottom: 10px;transition: all .5s
 }
 .news .newslist ul li .k{position: relative;}
  .news .newslist ul li .k .mark{width: 100%;height: 100%;position: absolute;left: 0px;top: 0;z-index: 4}
    .news .newslist ul li .k .mark1{width: 100%;height: calc(100% - 46px);position: absolute;left: 0px;bottom: 0;z-index: 4}
  .news .newslist ul li .k .morezd{margin-top: -10px;display: flex;flex-direction: column;align-items: center;}

  .news .newslist ul li .k .zdm{border-radius: 0 0 6px 6px;height: 6px}
    .news .newslist ul li .k .zdm.one{background: rgba(255,255,255,.7);width: 94%}
    .news .newslist ul li .k .zdm.two{background: rgba(255,255,255,.5);width: 88%}

 .news .newslist ul li .kli {
     background: rgba(255, 255, 255, .9);
     border-radius: 12px;
     margin-bottom: 10px;overflow:hidden;
     transition: all .5s ;
 }

 .news .newslist ul li .ktit {
     display: flex;
     justify-content: space-between;
     height: 46px;transition: all .5s;
 }


 .news .newslist ul li .ktit .from {
     font-size: 18px;
     color: #fff;text-shadow: 0 1px 1px rgba(0,0,0,.3)
 }

 .news .newslist ul li .ktit .dos {
     display: flex;width: 100px;justify-content: space-between;
 }

 .news .newslist ul li .ktit .dos > div {
     height: 26px;
     color: #221d82;
     font-size: 12px;
 }

 .news .newslist ul li .ktit .dos .zd {
     border-radius: 13px;
     background: rgba(255, 255, 255, .9);
     line-height: 26px;
     position: relative;transition: all .5s;width: 64px;overflow: hidden;
     display: flex;align-items: center;box-shadow: 0 0 3px rgba(0,0,0,.4)
 }
 .news .newslist ul li .ktit .dos .zd.del{width: 26px;background: rgba(253,194,55,.9);}
  .news .newslist ul li .ktit .dos .zd.del .arrow{border-color: #fff}
 .news .newslist ul li .ktit .dos .zd > div{flex-shrink: 0}
 .news .newslist ul li .ktit .dos .zd .arrow {
     width: 8px;
     height: 8px;
     display: block;
     border-top: solid 1px #221d82;border-right: solid 1px #221d82;
     transform: rotate(-45deg);margin: 5px 10px 0 9px;
    
 }


 .news .newslist ul li .ktit .dos .close {box-shadow: 0 0 3px rgba(0,0,0,.4);
     border-radius: 13px;
     background: rgba(255, 255, 255, .9);
     position: relative;overflow: hidden;
     transition: all .5s;width: 26px;display: flex;align-items: center;justify-content: flex-end;
 }
  .news .newslist ul li .ktit .dos .close > div{flex-shrink: 0}
 .news .newslist ul li .ktit .dos .close .cha{display: block;width: 26px;height:26px;transform: rotate(-45deg);position: relative;overflow: hidden;position: absolute;top: 0;right: 0}
 .news .newslist ul li .ktit .dos .close .cha:after {
     content: '';
     width: 14px;
     height: 1px;
     position: absolute;
     background: #221d82;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
 }

 .news .newslist ul li .ktit .dos .close .cha:before {
     content: '';
     width: 1px;
     height: 14px;
     position: absolute;
     background: #221d82;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
 }
.news .newslist ul li .ktit .dos .close .te{font-style: normal;line-height: 26px;opacity: 0;text-align: center;width: 60px;transition: all .2s;}
.news .newslist ul li .ktit .dos .close.del{width: 60px;background: rgba(253,194,55,.9);color: #fff}
.news .newslist ul li .ktit .dos .close.del .cha{display: none}
.news .newslist ul li .ktit .dos .close.del .te{opacity: 1}

 .news .newslist ul li .ti {
     padding: 5px 10px;
     font-size: 12px;
     color: #221d82;
     transition: all .5s
 }

 .news .newslist ul li .ti i {
     float: right;
     color: #161259;
     font-style: normal;
 }

 .news .newslist ul li .con {
     line-height: 16px;
     padding: 0 10px 10px;
     font-size: 14px;transition: all .5s
 }
 .news .newslist ul li .con .more{font-size: 12px;margin-top: 6px;color: #161259;transition: all .5s}
.news .newslist ul li.suo .ktit{transform: scale(.92);height: 0;opacity: 0;}

.news .newslist ul li.exp .ktit{transform: scale(1);height: 46px}
.news .newslist ul li.exp .con .more{opacity: 0;height: 0}
.news .newslist ul li.suo .con .more{opacity: 1;height: 16px}

.news .newslist ul li.suo .kli:nth-child(1){
    position: relative;z-index: 3
}


.fade-leave-to{opacity: 0;transform:scale(0);}
.fade-leave-active{position: absolute;}

.slide-leave-to,.slide-enter{opacity: 0;transform:translateY(-100%);}

.slide-leave-active{position: absolute;width: 100%;z-index: 1}


